<template>
    <div class="content-hd clearfix">
        <!--        <span ga-data="global-crumb-go-back" class="go-back&#45;&#45;2xP65">-->
        <!--&lt;!&ndash;            <a-icon type="rollback" />&ndash;&gt;-->
        <!--            <i class="anticon icon-back el-icon-back" ></i>返回-->
        <!--        </span>-->
        <div class="crumb-wrap">
           <span class="go-back">
               <a-icon type="rollback"/>返回
           </span>
            <span class="v-sep">|</span>
            <a-breadcrumb :routes="routes">
                <template slot="itemRender" slot-scope="{route, params, routes, paths}">
                    <span v-if="routes.indexOf(route) === routes.length - 1">
                        {{route.breadcrumbName}}
                    </span>
                    <router-link v-else :to="`${basePath}/${paths.join('/')}`">
                        {{route.breadcrumbName}}
                    </router-link>
<!--                    <a-breadcrumb-item>{{$route.path}}</a-breadcrumb-item>-->
                </template>
            </a-breadcrumb>{{$route.path}}
        </div>
        <div class="fr">
            <a ga-data="global-field-config" class="right-menu">
                <a-icon type="setting"/>
                字段配置
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ContentHead",

        data() {
            const {lang} = this.$route.params
            return {
                basePath: `/${lang}/components/breadcrumb`,
                routes: [{
                    path: 'index',
                    breadcrumbName: '首页'
                }, {
                    path: 'first',
                    breadcrumbName: '一级面包屑'
                }, {
                    path: 'second',
                    breadcrumbName: '当前页面'
                }],
            }
        },
    }
</script>

<style lang="stylus" scoped>
    .content-hd
        margin-bottom: 8px;

    .crumb-wrap
        float left

        .go-back
            cursor pointer
            border 1px solid #2b9262
            color #2b9262
            padding 0 5px 0 1px
            height 22px
            line-height 20px
            border-radius 2px
            transition .2s

        .v-sep
            margin 0 10px
            color rgba(0, 0, 0, .45)

    .right-menu
        display inline-block
        margin-right 20px
        color #333
        font-size 13px

        i
            vertical-align middle
            margin -3px 5px 0 0
            color #222

    .ant-breadcrumb {
        display: inline-block;
    }
</style>